<template>
  <div class="chart" ref="chart">
    <canvas ref="axis"></canvas>
    <canvas ref="trend"></canvas>
  </div>
</template>

<script>
import trendArr from '../../trend.js';
export default {
  data(){
      return{
          ctx:null,
          scale:0,
          trend:null,
          height:0,
          width:0
      }
  },
  mounted(){
      this.createAxis();
      this.drawTrend();
  },
  methods: {
    createAxis() {
      let height = this.$refs.chart.scrollHeight*4,
        width = this.$refs.chart.scrollWidth*4;
      this.height = height;
      this.width = width;

      let canvas = this.$refs.trend;
      canvas.height = height;
      canvas.width = width;
      this.trend = canvas.getContext('2d');

      let axis = this.$refs.axis;
      axis.height = height;
      axis.width = width;
      let scale = height / 6;
      this.scale = scale;
      let ctx = axis.getContext("2d");
      this.ctx = ctx;

      ctx.beginPath();
      ctx.lineWidth = 0.05;
      ctx.strokeStyle = "#fff";
      for (let i = 1; i <= 5; i++) {
        ctx.moveTo(0, scale * i);
        ctx.lineTo(width, scale * i);
        ctx.stroke();
      }
      for (let i = 1; i <= 12; i++) {
        ctx.moveTo(scale * i, 0);
        ctx.lineTo(scale * i, height);
        ctx.stroke();
      }
      ctx.closePath();
    },
    drawTrend(){
      let lastOne = null,arr = [],isSame = false;
      trendArr.forEach(item=>{
        if(lastOne&&(Number(lastOne.times)<2&&Number(item.times)<2||Number(lastOne.times)>=2&&Number(item.times)>=2)){
          isSame = true;
        }else{
          isSame = false
        }
        if(isSame){
          arr[arr.length-1].push(item);
        }else{
          arr.push([item])
        }
        lastOne = item;
      })
      
      let redColor = ["#FF0B2D","#FF657E"],greenColor = ["#24FFAF","#92FFE7"],color = null;
      let _this = this;

      let res = loopDraw(arr);
      while(res){
        if(res.msg==='continue'){
          let arr = res.arr;
          res = loopDraw(arr);
        }else{
          break;
        }
      }
      

      function loopDraw(arr){
        _this.trend.clearRect(0,0,_this.width,_this.height);//绘图前清空画布
        
        if(arr.length>12){
          arr.splice(0,arr.length-12);
          return {msg:'continue',arr}
        }else{
          for(let index = 0; index < arr.length; index++){
            let item = arr[index];
            if(Number(item[0].times)<2){
              color = redColor;
            }else{
              color = greenColor;
            }
            for(let i = 0; i < item.length; i++){//当垂直方向数量大于6时向右偏移
              if(arr.length-index-1<item.length-6){
                if(i-5+arr.length-(arr.length-index-1)>12){
                  arr.shift();
                  return {msg:'continue',arr}
                }
              }
              
              if(i>=6){
                _this.drawGradientCirc(_this.trend,_this.scale/2+index*_this.scale+(i-5)*_this.scale,_this.scale/2+5*_this.scale,_this.scale/4-1,color)
              }else{
                _this.drawGradientCirc(_this.trend,_this.scale/2+index*_this.scale,_this.scale/2+i*_this.scale,_this.scale/4-1,color)
              }
            }
          }
        }
      }
    },
    drawGradientCirc(ctx,x,y,radius,color){
        ctx.beginPath();
        ctx.arc(x,y,radius,0,Math.PI*2);
        let grd = ctx.createLinearGradient(x, y-radius, x, y+radius);
        grd.addColorStop(0, color[0]);
        grd.addColorStop(1, color[1]);
        ctx.fillStyle = grd;
        ctx.fill();
        ctx.closePath();
    }
  }
};
</script>

<style lang="scss">
.chart{
  canvas{
    position: absolute;
    top: -150%;
    left: -150%;
    transform: scale(.25);
  }
}
</style>